
<!-- 登录 -->
<template>
  <div>

    <div class="wrap">
      <!-- <div style="text-align:right;margin:30px; 20px">
        <languageSwitch></languageSwitch>
      </div> -->

      <div class="form-data">
        <div style="display: flex;justify-content: center;align-items: center;margin-bottom:30px;">
          <img src="@/assets/images/1481892407.png" width="125" height="60" @click="toPage('/')">
          <span style="font-size:28px;color:#fff;font-weight:700">YS LOCKER</span>
        </div>
        <div class="form1">
          <p class="p-input pos">
            <input type="text" v-model="formData.email" :placeholder="$t('lan.pleaseEmail')">
          </p>
          <p class="p-input pos">
            <input type="password" v-model="formData.password" :placeholder="$t('lan.pleasePassword')">
          </p>
        </div>
        <div class="r-forget">
          <div style="display:inline-block;width:37%;">
            <p style="color:#fff;font-size:16px"><i class="el-icon-success" @click="checkAgreement" :style="{'color':checked?'#e6a23c':'#fff',paddingRight:'10px',fontSize:'16px'}"></i>{{$t('lan.account')}}</p>
          </div>
          <div style="display:inline-block;text-align:right;width:62%;">
            <span @click="toPage(`/registered`)" style="border-right:1px solid #ccc;padding-right:13px">{{$t('lan.register')}}</span>
            <span @click="toPage(`/forgotPassword?email=${formData.email|| ''}`)" style="padding-left:10px">{{$t('lan.forgetPassword')}}</span>
          </div>
        </div>
        <el-button class="lang-btn " type="primary" :loading="loading" @click="webLogin">{{$t('lan.login')}}</el-button>
      </div>
    </div>

    <div class="footer">Copyright © 2016-2020 {{$t('lan.reserved')}}</div>
  </div>
</template>
<script>
import { Notification } from 'element-ui'
import { login, sendLoginCode } from '../api'
import languageSwitch from './components/languageSwitch'
export default {
  components: { languageSwitch },
  data () {
    return {
      checked: JSON.parse(localStorage.getItem("checked")) || false,
      isEmail: true,
      sendCode: false,
      codeEmail: '发送邮箱验证码',
      loading: false,
      formData: {
        email: null,
        password: null,
        // code: null,
      }
    }
  },
  watch: {
    // 监视单选框
    checked () {
      if (!this.checked) {
        localStorage.removeItem("email");
      }
      // 勾选状态将勾选状态以字json格式存储
      localStorage.setItem("checked", JSON.stringify(this.checked));
    }
  },
  methods: {
    checkAgreement () {
      this.checked = !this.checked
    },
    // 切换邮箱 或验证码登录
    loginSwitch (bool) {
      this.formData.password = null
      this.formData.code = null
      if (this.isEmail === bool) return
      this.isEmail = bool
    },
    // 登录
    async webLogin () {
      let pwd = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,15}$/
      let email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (!this.formData.email) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailEmpty') })
      }
      if (!email.test(this.formData.email)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailFormat') })
      }
      if (!this.formData.password) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.passwordEmpty') })
      }
      if (!pwd.test(this.formData.password)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.passwordFormat') })
      }
      try {
        this.loading = true
        const webLogin = await login(this.formData)
        localStorage.setItem('userInfo', JSON.stringify(webLogin))
        localStorage.setItem('token', webLogin.token)
        if (this.checked) {
          localStorage.setItem("email", this.formData.email);
        }
        setTimeout(() => this.$router.replace('/'), 1000)
        this.loading = false
      } catch (err) {
        this.loading = false
      }

    },
    // 发送验证码
    async sendVerificationCode () {
      if (!this.formData.email) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: '邮箱不能为空' })
      }
      let code = 60
      let timer = setInterval(() => {
        this.sendCode = true
        code--
        this.codeEmail = `${code}s`
        if (code === 0) {
          this.codeEmail = '发送邮箱验证码'
          this.sendCode = false
          clearInterval(timer)
        }
      }, 1000)
      const data = await sendLoginCode({ email: this.formData.email })
      Notification({ title: this.$t('lan.success'), type: 'success', message: '发送成功' })
    }
  },
  mounted () {
    if (this.checked) {
      this.formData.email = localStorage.getItem("email");
    }
  }
}
</script>
<style scoped>
::-webkit-input-placeholder {
  color: #898989;
}
:-moz-placeholder {
  color: #898989;
}
::-moz-placeholder {
  color: #898989;
}
:-ms-input-placeholder {
  color: #898989;
}
.footer {
  height: auto;
  padding: 15px 0px;
  line-height: 30px;
  background: #000;
  font-size: 14px;
  color: #eee;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  border: none !important;
}
.wrap {
  background: url(../../assets/images/bj.png) no-repeat center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-size: cover;
}
.form-data {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #3c3d3e;
  width: 780px;
  margin-left: -390px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  padding: 35px 90px 35px 90px;
  box-sizing: border-box;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  position: fixed;
}
.r-forget span {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}
</style>